<template>
  <div class="looktask">
    <el-page-header @back="goBack" content="任务" title="返回">
    </el-page-header>

    <el-card class="box-card mt-10">

      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><p>任务名称:</p></el-col>
        <el-col :span="6" class=" content">
          <span>开题报告</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>要求:</span></el-col>
        <el-col :span="6" class="content" style="color: #8c939d"><span>你们必须认真完成，必须认真</span></el-col>

      </el-row>
      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>学生附件:</span></el-col>
        <el-col :span="8" class="content textcenter" style="position: relative">
          <el-row>
            <el-col :span="8" class="content " style="position: relative">
              <div class="div_download">
                <a href="">
                  <div class="mask textcenter">
                    <span>下载</span>
                  </div>
                </a>
              </div>
              毕业设计开题报告.docx
            </el-col>
            <el-col :span="8" class="content " style="position: relative">
              <div class="div_download">
                <a href="">
                  <div class="mask textcenter">
                    <span>下载</span>
                  </div>
                </a>
              </div>
              毕业设计审批表.docx
            </el-col>
            <el-col :span="8" class="content " style="position: relative">
              <div class="div_download">
                <a href="">
                  <div class="mask textcenter">
                    <span>下载</span>
                  </div>
                </a>
              </div>
              毕业设计任务书.docx
            </el-col>
          </el-row>

        </el-col>

      </el-row>




      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"> <span>提交时间:</span></el-col>
        <el-col :span="6" >
          2019-10-10 12.12.12

        </el-col>

      </el-row>


      <el-row :gutter="20" class="mt-10">
        <el-col :span="3" class="textright titlecolor"><span>学生备注:</span></el-col>
        <el-col :span="8" class="content">
         <span>水电费快乐哈士大夫看见爱上都会爱上对方还开始的恢复卡拉斯等级划分卡时间的回复拉斯柯达金凤凰拉伸的尽快发货阿里斯顿讲课费哈三联东方健康华盛顿了</span>
        </el-col>

      </el-row>

      <el-row class="mt-10 textright mb-5 mr-5">

        <el-button type="success" @click="edit">编辑</el-button>
        <el-button type="warning" @click="goBack">返回</el-button>

      </el-row>

    </el-card>

  </div>
</template>

<script>
  export default {
    name: "looktask",
    data() {
      return {
        isexamine: true,
        isedit: false,
        input: '这是学生备注',
        fileList:[]
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      //  获取id 查询对应的论文
      getthesis() {
        this.$route.query.id
      },
      //  编辑
      edit() {

        this.$router.push({
          name:"Addtask",
          query:{
            edit:1
          }

        })
      },
      saveinfo() {
        this.isedit = false
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log("*********************");
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      goBack() {
        this.$router.go(-1)
      }, editinfo() {
        this.isedit = true
      },
      saveinfo() {
        this.isedit = false
      },
    },
    created() {

    },
  }
</script>

<style>

  .mt-10 {
    margin-top: 20px;
  }

  .titlecolor {
    color: #888888;
  }

  .content {
    color: #444444;
  }

  .mask {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 20px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
  }

  .div_download:hover .mask {
    opacity: 1
  }

  .div_download {
    height: 90px;
    width: 90px;
    background-color: #1e9fff;
    position: relative;
    margin: 0 auto;
  }

  .mb-10 {
    margin-bottom: 30px;
  }
</style>
